<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue入门</title>
</head>
<script src="../js/vue.js"></script>
<body>
    <!-- 
    初始Vue实例
    1.想要Vue工作，必须创建一个Vue实例，且要传入一个配置对象
    2.root容器里的代码依然复核html规范，只不过混入了一些特殊的Vue语法
    3.root容器里的代码被称为Vue模板
    4.Vue实例和容器是一一对应的
    5.真是开发中只有一个Vue实例，并且会配合着组件一起使用
    6.{{xxx}}中xxx要写js表达式，且xxx可以自动读取到data中所有属性
    7.一旦data中的数据发生改变，那么页面中用到该数据的地方也会自动更新

    {{xxx}}插值表达式
    注意区分：js表达式 和js代码（语句）
        1.js表达式：一个表达式会产生一个值，可以放在任何一个需要值的地方
            (1)、a
            (2)、a+b
            (3)、demo(1)
            (4)、x===y ? 'a' : 'b'
        2.js代码（语句）
            (1)、if(){}
            (2)、for(){}

    -->
   <div id="root">
    <h1>hello {{msg}}</h1>
   </div>
</body>
<script>
    Vue.config.productionTip = false;//阻止生产模式下提示信息
    // 创建vue实例
    new Vue({
        el:"#root",//el用于指定哪个元素作为vue实例的宿主元素
        data:{//data用于指定vue实例的数据
            msg:"芜湖！！"
        }
    })
</script>
</html>